<template>
	<div>
    <h3>穿梭框</h3>
    <!-- noChecked 没有选项被选中时
    hasChecked 有选项被选中时
    filterable 可搜索的-->
    <el-transfer v-model="transferVal"
    :data="transferData"
    :titles="['未选中城市','已选中城市']"
    :button-texts="['向左边','向右边']"
    :format="{noChecked:'${total}',
    hasChecked:'${checked}/${total}'}"
    filterable
    :props="{
      key:'id',
      label:'citiesName'
    }"
    :left-default-checked="[1,2]"
    :right-default-checked="[3]"
    @click="transferChange"
    ref="transfer"
    :render-content="renderContent">
    <template slot="left-footer">
      <el-button type="danger" size="mini" @click="clearFilter">清空</el-button>
    </template>
    <el-button type="primary" size="mini" slot="left-footer">操作</el-button>
    <el-button type="primary" size="mini" slot="right-footer">操作</el-button>
    </el-transfer>
  </div>
</template>

<script>
	export default{
		data(){
			return{
        renderContent(h,option){
          console.log(h);
          console.log(option);
          let value=option.citiesName;
          let pinyin=option.pinyin;
          return h('span',value+'-'+pinyin);
          /* return <span>{option.citiesName}-{option.pinyin}</span> */
        },
        transferVal:[3],
        transferData:[{
          id:1,
          citiesName:'嘉兴',
          pinyin:'jiaxing'
        },{
          id:2,
          citiesName:'杭州',
          pinyin:'hangzhou'
        },{
          id:3,
          citiesName:'长沙',
          pinyin:'changsha'
        },{
          id:4,
          citiesName:'株洲',
          pinyin:'zhuzhou'
        },{
          id:5,
          citiesName:'北京',
          pinyin:'beijing'
        },{
          id:6,
          citiesName:'上海',
          pinyin:'shanghai'
        }]
			}
		},
		components:{

		},
		methods:{
      clearFilter(){
        this.$refs.transfer.clearQuery('left');
      },
      transferChange(value,deriction,moveKeys){
        console.log(value,deriction,moveKeys);
      }
		}
	}
</script>

<style>
</style>
